<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-13 09:52:40
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-24 15:42:29
 * @FilePath: /h-radar-expose/components/ExposeList/Item.vue
 * @Description:
-->
<template>
  <div class="expose-list-wrap">
    <div v-for="(item, index) in listData" :key="index" class="list-content">
      <div class="list-left">
        <div class="left-box">
          <el-checkbox
            v-model="item.isChecked"
            class="checkbox"
            :style="`${item.isChecked ? ' opacity: 1;' : ''}`"
            @change="checkboxChange(item)"
          ></el-checkbox>
        </div>
      </div>
      <div class="list-middle">
        <img
          v-if="item.radarIconUrl"
          :src="iconPrefix(item.radarIconUrl)"
          alt=""
          loading="lazy"
          @error="setDefaultImage"
        />
        <img
          v-if="!item.radarIconUrl"
          src="@/static/images/retrieval/full.png"
          alt=""
        />
      </div>
      <div class="list-right">
        <div class="expose-list-top">
          <div class="list-top-left">
            <span
              class="name"
              :title="getName(item)"
              @click="clickItem(item)"
            >
              {{ getName(item) }}</span
            >
            <OperateBtn
              v-if="item.link"
              :item="item"
              @operateClick="operateClick"
            ></OperateBtn>
            <RiskLevel :risk-list="item"></RiskLevel>
          </div>
          <div class="list-top-right">
            <AssetCount v-if="showRadar(item)" :item="item"></AssetCount>
            <FalseAlarm :item="item" @successFn="successFn"></FalseAlarm>
          </div>
        </div>
        <div
          class="expose-list-middle"
          :class="[
            item.businessType === 'code' || item.businessType === 'web'
              ? 'border-bottom'
              : '',
          ]"
        >
          <div class="list-middle-left">
            <ul>
              <el-tooltip
                v-for="(child, index2) in item.fieldArr"
                :key="`${index2}-tip`"
                effect="dark"
                popper-class="custom-tooltip-wrap"
                placement="bottom"
              >
                <template v-slot:content>
                  <div class="tooltip-container">
                    <div style="margin-bottom: 10px">{{ child.name }}：</div>
                    <div
                      v-for="(item2, i2) in child.value"
                      :key="i2"
                      style="
                        height: 25px;
                        border: 1px solid #3c3f5e;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0px 12px;
                        color: rgba(255, 255, 255, 1);
                        border-radius: 4px;
                        margin-bottom: 10px;
                        cursor: pointer;
                      "
                    >
                      <template v-if="child.key === 'company'">
                        <span
                          @click.stop="valueClick(child.key, item2.company)"
                        >
                          {{ item2.company }}
                        </span>
                        <i
                          v-if="item2.modifiable"
                          class="tag-close el-icon-close"
                          style="margin-left: 5px"
                          @click="
                            delCompany(item, item2, index, i2, item2.company)
                          "
                        ></i>
                      </template>
                      <template v-else-if="child.key === 'ipGeo'">
                        <span>
                          <span
                            @click.stop="
                              valueClick('country_name', item2.country_name)
                            "
                          >
                            {{ item2.country_name }}
                          </span>
                          <span style="margin: 0 8px">/</span>
                          <span
                            @click.stop="valueClick('region', item2.region)"
                          >
                            {{ item2.sourceRegion }}
                          </span>
                        </span>
                      </template>
                      <template v-else-if="child.key === 'directSupperCompany'">
                        <span>
                          <span
                            @click.stop="
                              valueClick('company', item2.companyName)
                            "
                          >
                            {{ item2.companyName }}
                          </span>
                          <span
                            v-if="item2.ratio !== '--'"
                            style="margin: 0 8px"
                            >/</span
                          >
                          <span
                            v-if="item2.ratio !== '--'"
                            @click.stop="ratioClick('ratio', item2.ratio)"
                          >
                            {{ item2.ratio }}%
                          </span>
                        </span>
                      </template>
                      <template v-else>
                        <span @click.stop="valueClick(child.key, item2)">
                          {{ item2 }}
                        </span>
                      </template>
                    </div>
                  </div>
                </template>
                <li>
                  <div class="left">
                    <i :class="`${child.icon}`"></i>
                  </div>
                  <div class="right">
                    <div class="item-box">
                      <span
                        v-for="(child2, i) in child.value"
                        :key="i"
                        class="item"
                      >
                        <template v-if="child.key === 'company'">
                          <span
                            @click.stop="valueClick(child.key, child2.company)"
                          >
                            {{ child2.company }}
                          </span>
                        </template>
                        <template v-else-if="child.key === 'ipGeo'">
                          <span>
                            <span
                              @click.stop="
                                valueClick('country_name', child2.country_name)
                              "
                            >
                              {{ child2.country_name }}
                            </span>
                            <span style="margin: 0 8px">/</span>
                            <span
                              @click.stop="valueClick('region', child2.region)"
                            >
                              {{ child2.sourceRegion }}
                            </span>
                          </span>
                        </template>
                        <template
                          v-else-if="child.key === 'directSupperCompany'"
                        >
                          <span>
                            <span
                              @click.stop="
                                valueClick('company', child2.companyName)
                              "
                            >
                              {{ child2.companyName }}
                            </span>
                            <span
                              v-if="child2.ratio !== '--'"
                              style="margin: 0 8px"
                              >/</span
                            >
                            <span
                              v-if="child2.ratio !== '--'"
                              @click.stop="ratioClick('ratio', child2.ratio)"
                            >
                              {{ child2.ratio }}%
                            </span>
                          </span>
                        </template>
                        <template v-else>
                          <span @click.stop="valueClick(child.key, child2)">
                            {{ child2 }}
                          </span>
                        </template>
                        <span
                          v-if="i !== child.value.length - 1"
                          class="line"
                        ></span>
                      </span>
                    </div>
                  </div>
                </li>
              </el-tooltip>
            </ul>
            <div class="tags-box">
              <AssetTags
                :id="item.id"
                :key="item.id"
                :value="item.tag"
                :category="item.businessType"
                :col-num="2"
                @updateTags="updateTags"
                @tagClick="tagClick"
              ></AssetTags>
            </div>
          </div>
          <div v-if="showRadar(item)" class="list-middle-right">
            <RadarChart :index="index" :public-item="item"></RadarChart>
          </div>
        </div>
        <div v-if="showCollapse(item)" class="expose-list-bottom">
          <el-collapse @change="collapseChange($event, item, index)">
            <el-collapse-item :title="collapseTitle(item)" :name="index">
              <div
                v-if="item.businessType === 'code'"
                v-html="collapseContent(item)"
                class="collapse-box"
              ></div>
              <div v-if="item.businessType === 'web'" class="collapse-box">
                <ShowCode :code-info="item.collapseInfo"> </ShowCode>
                
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <!-- 移动应用类型 -->
        <div v-if="showCollapseTwo(item)" class="expose-list-bottom">
          <el-collapse>
            <el-collapse-item title="简介" :name="index">
              <div class="collapse-box">
                {{ item.introduction }}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import AssetCount from '@/components/Expose/AssetCount.vue';
import FalseAlarm from '@/components/Expose/FalseAlarm.vue';
import OperateBtn from '@/components/Expose/OperateBtn.vue';
import RiskLevel from '@/components/Expose/RiskLevel.vue';
import RadarChart from '@/components/Expose/RadarChart.vue';
import AssetTags from '@/components/Expose/AssetTags.vue';
import ShowCode from "@/components/Expose/ShowCode.vue";
import { defineProps, defineEmits, ref, watch, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
const emit = defineEmits([
  'checkboxChange',
  'clickItem',
  'successFn',
  'updateTags',
  'exposureHandle',
  'ratioClick',
]);
const store = useStore();
const props = defineProps({
  publicList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  category: {
    type: String,
    default: '',
  },
  conditionVal: {
    type: String,
    default: '',
  },
});
const listData = ref<any>([]);
const exposureList = ref<any>([]);
const collapseInfo = ref({});
const advancedSearchOpts = ref([]);
const optsMap = computed(() => {
  const map = {};
  if (
    typeof advancedSearchOpts.value &&
    typeof advancedSearchOpts.value === 'object'
  ) {
    const values = Object.values(advancedSearchOpts.value) as any[];
    values
      .reduce((acc, val) => acc.concat(val), [])
      .forEach((el: any) => {
        map[el.signValue] = el;
      });
    return map;
  }
});
watch(
  () => props.publicList,
  (newVal) => {
    listData.value = newVal;
    listData.value.forEach((el) => {
      let businessType = el.businessType || props.category;
      if (businessType === 'affiliatedCompany') {
        businessType = 'business';
      }
      if (businessType === 'ip') {
        el.ipGeo = [
          {
            country_name: el.countryName,
            region: el.region,
            sourceRegion: el.sourceRegion,
          },
        ];
      }
      el.fieldArr = mergeData(el, businessType);
    });
  },
);
watch(
  () => props.conditionVal,
  (newVal) => {
    if (!newVal) {
      exposureList.value = [];
    }
  },
);
onMounted(() => {
  advancedSearchOptss().then(() => {
    advancedSearchOpts.value = store.state.expose.advancedSearchOpts;
  });
});
const advancedSearchOptss = async () => {
  await store.dispatch('expose/setAdvancedSearchOpts');
};
// 解决banner字段内容太多初始化渲染的时候，页面卡住问题
const collapseChange = (activeNames, item, index) => {
  if (activeNames.length) {
    listData.value[index] = {
      ...item,
      collapseInfo: headersInfo(item),
    };
  } else {
    listData.value[index] = {
      ...item,
      collapseInfo: {},
    };
  }
};
const checkboxChange = (item) => {
  emit('checkboxChange', item);
};
const iconPrefix = (url) => {
  let newUrl = '';
  if (url) {
    const substring = url.substring(4);
    newUrl = `/dayu/v1/huaun${substring}`;
  }
  return newUrl;
};
const setDefaultImage = (e) => {
  e.target.src = require('@/static/images/retrieval/full.png');
};
const clickItem = (item) => {
  emit('clickItem', item);
};
const operateClick = (type, item) => {
  // if (type === 'url') {
  //   if (item.businessType === 'web') {
  //     window.open(item.name)
  //   } else if (item.businessType === 'ip') {
  //   } else if (item.businessType === 'domain') {
  //     window.open(`http://${item.domain}`)
  //   } else if (item.businessType === 'app') {
  //     window.open(item.sourceUrl)
  //   }
  // }
  window.open(item.link);
};
const successFn = () => {
  emit('successFn');
};
const updateTags = () => {
  emit('updateTags');
};
const getName = (item) => {
  const name = item.name || item.ip || item.domain || item.title;
  return name;
};
const showRadar = (item) => {
  // console.log(item,'3333');
  
  const showList = ['web', 'ip', 'domain', 'app'];
  return showList.includes(item.businessType);
};
const showCollapse = (item) => {
  const showList = ['web', 'code'];
  return showList.includes(item.businessType);
};
const showCollapseTwo = (item) => {
  // miniProgram 小程序, officialAccount 公众号
  const showList = ['miniProgram', 'officialAccount'];
  return showList.includes(item.businessType);
};
const collapseTitle = (item) => {
  let title = '';
  if (item.businessType === 'web') {
    title = 'Response';
  }
  if (item.businessType === 'code') {
    title = '代码详情';
  }
  return title;
};
const collapseContent = (item) => {
  return item.banner || item.content || '';
};
const headersInfo = (item) => {
  let code = '';
  if (item?.banner) {
    code = item.banner;
  }
  return {
    language: 'http',
    showLineNumbers: true,
    code: code,
  };
};
const tooltipContent = (item) => {
  let content = item.value.join('，');
  let tip = `${item.name}：${content}`;
  return tip;
};
// 驼峰字符串转下划线字符串
const toUnderline = (str) => {
  return str.replace(/([A-Z])/g, '_$1').toLowerCase();
};
// 点击值输入框拼接条件
const valueClick = (key, val) => {
  let res = val;
  if (key === 'appType') {
    if (optsMap.value && optsMap.value['app.app_type']?.selection) {
      const selection = optsMap.value['app.app_type'].selection;
      selection.forEach((el) => {
        if (el.label === val) {
          res = el.value;
        }
      });
    }
  }

  let paramsKey = toUnderline(key);

  const totalKey = `${paramsKey}=${res}`;
  const arrIndex = exposureList.value.indexOf(totalKey);
  if (arrIndex > -1) {
    // 取消选中
    exposureList.value.splice(arrIndex, 1);
  } else {
    // 点击选中
    exposureList.value.push(totalKey);
  }

  // 获取当前被选中的类型
  let strVal = '';
  const commonTags = store.state.enum.commonField;
  if (commonTags.includes(paramsKey)) {
    strVal = `(${paramsKey}=="${res}")`;
  } else {
    strVal = `(${props.category}.${paramsKey}=="${res}")`;
  }
  emit('exposureHandle', strVal, arrIndex > -1);
};
// 点击百分比
const ratioClick = (key, val) => {
  emit('ratioClick', val);
};
// 点击标签
const tagClick = (val: any) => {
  const arrIndex = exposureList.value.indexOf(val);
  if (arrIndex > -1) {
    // 取消选中
    exposureList.value.splice(arrIndex, 1);
  } else {
    // 点击选中
    exposureList.value.push(val);
  }
  let strVal = `(tag=="${val}")`;
  emit('exposureHandle', strVal, arrIndex > -1);
};

// 删除公司
const delCompany = async (item, item2, index, index2, company) => {
  const { code, data } = await store.dispatch('api/deleteCompany', {
    assets: [
      {
        assetId: item.id,
        category: item.businessType,
      },
    ],
    companies: [company],
  });
  if (code === 0) {
    ElMessage.success('正在删除');
    listData.value[index].fieldArr[index2].value.splice(
      listData.value[index].fieldArr[index2].value.indexOf(item2),
      1,
    );
    successFn();
  }
};
const publicField = (type) => {
  // 通用-start
  const common = [
    {
      key: 'company',
      name: '所属单位',
      icon: 'vul-icon-company',
    },
  ];

  const dataObj = {
    web: [
      {
        key: 'ip',
        name: '源IP',
        icon: 'raderfont rader-icon-ip-a',
      },
      {
        key: 'title',
        name: '网站标题',
        icon: 'raderfont rader-icon-data-table',
      },
      {
        key: 'icpNumber',
        name: '备案号',
        icon: 'raderfont rader-icon-filings',
      },
      {
        key: 'ipGeo',
        name: '国家/地区',
        icon: 'vul-icon-address',
      },
      {
        key: 'waf',
        name: 'waf',
        icon: 'raderfont rader-icon-waf',
      },
      {
        key: 'cdn',
        name: 'cdn',
        icon: 'raderfont rader-icon-cdn',
      },
      {
        key: 'certAuthorizedDomain',
        name: '证书',
        icon: 'raderfont rader-icon-certificate',
      },
      {
        key: 'asNumber',
        name: 'ASN',
        icon: 'vul-icon-task',
      },
      {
        key: 'asOrg',
        name: 'ASN组织',
        icon: 'vul-icon-task',
      },
      {
        key: 'protocol',
        name: '协议',
        icon: 'vul-icon-number',
      },
      {
        key: 'productCategory',
        name: '产品类型',
        icon: 'vul-icon-configuration-b',
      },
      {
        key: 'productName',
        name: '产品',
        icon: 'vul-icon-gather',
      },
    ],
    ip: [
      {
        key: 'operators',
        name: '服务商',
        icon: 'raderfont rader-icon-service',
      },
      {
        key: 'ipGeo',
        name: '国家/地区',
        icon: 'vul-icon-address',
      },
      // {
      //   key: 'countryName',
      //   name: '国家',
      //   icon: 'vul-icon-address',
      // },
      // {
      //   key: 'region',
      //   name: '位置',
      //   icon: 'vul-icon-address',
      // },
      {
        key: 'cdn',
        name: 'cdn',
        icon: 'raderfont rader-icon-cdn',
      },
      {
        key: 'os',
        name: '操作系统',
        icon: 'raderfont rader-icon-system',
      },
      {
        key: 'asNumber',
        name: 'ASN',
        icon: 'vul-icon-task',
      },
      {
        key: 'asOrg',
        name: 'ASN组织',
        icon: 'vul-icon-task',
      },
    ],
    domain: [
      {
        key: 'domainIsp',
        name: '服务商',
        icon: 'raderfont rader-icon-service',
      },
      {
        key: 'icpNumber',
        name: '备案号',
        icon: 'raderfont rader-icon-filings',
      },
      // {
      //   key: 'cert',
      //   name: '证书',
      //   icon: 'raderfont rader-icon-certificate',
      // },
      {
        key: 'expirationTime',
        name: '到期时间',
        icon: 'vul-icon-time',
      },
    ],
    app: [
      {
        key: 'appType',
        name: '移动应用类型',
        icon: 'raderfont rader-icon-phone',
      },
      {
        key: 'developer',
        name: '开发者',
        icon: 'vul-icon-people',
      },
      {
        key: 'keyword',
        name: '命中关键词',
        icon: 'vul-icon-poc',
      },
      {
        key: 'version',
        name: '版本',
        icon: 'vul-icon-task',
      },
      {
        key: 'dataSource',
        name: '泄露源',
        icon: 'vul-icon-address',
      },
    ],
    miniProgram: [
      {
        key: 'appType',
        name: '移动应用类型',
        icon: 'raderfont rader-icon-phone',
      },
      {
        key: 'management',
        name: '运营主体',
        icon: 'vul-icon-people',
      },
      {
        key: 'keyword',
        name: '命中关键词',
        icon: 'vul-icon-poc',
      },
      {
        key: 'dataSource',
        name: '泄露源',
        icon: 'vul-icon-address',
      },
    ],
    officialAccount: [
      {
        key: 'appType',
        name: '移动应用类型',
        icon: 'raderfont rader-icon-phone',
      },
      {
        key: 'management',
        name: '运营主体',
        icon: 'vul-icon-people',
      },
      {
        key: 'keyword',
        name: '命中关键词',
        icon: 'vul-icon-poc',
      },
      {
        key: 'dataSource',
        name: '泄露源',
        icon: 'vul-icon-address',
      },
    ],
    code: [
      {
        key: 'sourceUrl',
        name: '泄露源地址',
        icon: 'vul-icon-gather',
      },
      {
        key: 'dataSource',
        name: '泄露源',
        icon: 'vul-icon-gather',
      },
      {
        key: 'fileType',
        name: '文件类型',
        icon: 'vul-icon-gather',
      },
      {
        key: 'keyword',
        name: '命中关键词',
        icon: 'vul-icon-gather',
      },
      {
        key: 'username',
        name: '泄露账号ID',
        icon: 'vul-icon-gather',
      },
    ],
    business: [
      {
        key: 'directSupperCompany',
        name: '股权占比',
        icon: 'vul-icon-gather',
      },
      {
        key: 'regStatus',
        name: '是否存续',
        icon: 'vul-icon-gather',
      },
      {
        key: 'dataSource',
        name: '泄露源',
        icon: 'vul-icon-gather',
      },
    ],
    supplier: [
      {
        key: 'dataSource',
        name: '泄露源',
        icon: 'vul-icon-gather',
      },
      {
        key: 'bidsNumber',
        name: '中标次数',
        icon: 'vul-icon-gather',
      },
    ],
    darknet: [
      {
        key: 'type',
        name: '泄露类型',
        icon: 'vul-icon-gather',
      },
      {
        key: 'hitWord',
        name: '命中关键词',
        icon: 'vul-icon-gather',
      },
      {
        key: 'dataSource',
        name: '泄露源',
        icon: 'vul-icon-gather',
      },
    ],
  };
  return [...common, ...dataObj[type]];
};
// 组装数据
const mergeData = (itemData, businessType) => {
  // console.log(itemData, 'itemData')
  const arr: any = [];
  const allData = publicField(businessType);
  const splitList = ['productName', 'productCategory', 'keyword', 'dataSource'];
  const arrList = ['ip', 'countryName', 'asNumber', 'asOrg'];
  for (let j = 0; j < allData.length; j++) {
    let obj: any = {};
    let value: any = [];
    if (itemData[allData[j].key]) {
      if (splitList.includes(allData[j].key)) {
        value = itemData[allData[j].key].split(',');
      } else {
        if (arrList.includes(allData[j].key)) {
          if (businessType === 'web') {
            value = itemData[allData[j].key].length
              ? itemData[allData[j].key]
              : ['--'];
          } else {
            value = [itemData[allData[j].key]];
          }
        } else {
          value = [itemData[allData[j].key]];
        }

        if (allData[j].key === 'company') {
          value = itemData[allData[j].key].length
            ? itemData[allData[j].key]
            : [{ company: '--' }];
        }

        if (allData[j].key === 'ipGeo') {
          value = itemData[allData[j].key].length
            ? itemData[allData[j].key]
            : [{ country_name: '--', region: '--', sourceRegion: '--' }];
        }
        // 股权占比
        if (allData[j].key === 'directSupperCompany') {
          value = itemData[allData[j].key].length
            ? itemData[allData[j].key]
            : [{ companyName: '--', ratio: '--', targetCompany: '--' }];
        }
      }
    } else {
      if (allData[j].key === 'ipGeo') {
        value = [{ country_name: '--', region: '--', sourceRegion: '--' }];
      } else {
        value = ['--'];
      }
    }
    obj = {
      ...allData[j],
      value,
    };
    arr.push(obj);
  }
  return arr;
};
</script>
<style lang="scss" scoped>
.expose-list-wrap {
  .list-content {
    display: flex;
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
    padding-bottom: 0px;
    box-sizing: border-box;
    border: 1px solid transparent;

    &:hover {
      border: 1px solid $-v-color-primary;

      .list-left {
        .left-box {
          .checkbox {
            opacity: 1;
          }
        }
      }
    }
  }

  .list-left {
    .left-box {
      margin-right: 8px;

      .checkbox {
        opacity: 0;
        transition: opacity 0.2s;
        margin-top: 5px;
      }
    }
  }

  .list-middle {
    > img {
      width: 28px;
      height: 28px;
      margin-right: 8px;
      border-radius: 4px;
    }
  }

  .list-right {
    flex: 1;
    .expose-list-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      .list-top-left {
        flex: 1;
        display: flex;
        align-items: center;

        > .name {
          font-family: PingFangSC-Medium;
          font-size: 16px;
          line-height: 24px;
          // color: rgba(255, 255, 255, 0.8);
          margin-right: 18px;
          cursor: pointer;
          word-break: break-all;

          &:hover {
            color: $-v-color-primary;
          }
        }
      }
      .list-top-right {
        margin-left: 10px;
        // width: 200px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }

    .expose-list-middle {
      display: flex;
      // align-items: center;
      justify-content: space-between;

      &.border-bottom {
        border-bottom: 1px solid rgba(216, 216, 216, 0.1);
      }

      .list-middle-left {
        flex: 1;
        > ul {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          > li {
            display: flex;
            align-items: center;
            margin-right: 8px;
            margin-bottom: 16px;
            height: 25px;
            // max-width: 310px;

            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis; //文本超出时显示省略号
            .left {
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 22px;
              height: 25px;
              flex: 0 0 22px;
              border-radius: 4px 0px 0px 4px;
              box-sizing: border-box;
              border: 1px solid #3c3f5e;
              background: rgba(41, 45, 76, 0.5);
              i {
                font-size: 15px;
                color: rgba(255, 255, 255, 0.5);
              }
            }

            .right {
              height: 25px;
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #3c3f5e;
              border-radius: 0px 4px 4px 0px;
              border-left: 0;
              padding: 0px 12px;

              .item-box {
                // display: flex;
                // align-items: center;
                // color: rgba(255, 255, 255, 0.6);
                font-size: 12px;
                max-width: 310px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis; //文本超出时显示省略号

                .item {
                  cursor: pointer;
                }
                .line {
                  width: 0px;
                  height: 12px;
                  opacity: 1;
                  border-left: 1px solid rgba(0, 0, 0, 0.3);
                  margin: 0px 10px;
                }
              }
            }
          }
        }

        .tags-box {
          display: flex;
          align-items: center;

          .asset-tags {
            // width: 76px;
          }
          > .line {
            width: 0px;
            height: 14.5px;
            margin-right: 10px;
            opacity: 1;
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin: 0px 10px;
          }
        }
      }

      .list-middle-right {
        width: 340px;
      }
    }

    .expose-list-bottom {
      width: 100%;
      position: relative;
      padding-left: 10px;
      &::before {
        content: '';
        position: absolute;
        top: 18px;
        left: 0;
        width: 2px; /* 竖线的宽度 */
        height: 12px; /* 竖线的高度 */
        background-color: $-v-color-primary; /* 竖线的颜色 */
      }
      ::v-deep .el-collapse-item__content {
        // padding-bottom: 0px;

        .collapse-box {
          // background: #121527;
          max-height: 300px;
          overflow: auto;
        }
      }
    }
  }
}
</style>
